<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        p{
            color: #336699;
            text-align: center;
        }
        
        input[type="button"]{
            margin-bottom: 10px;
        }
        
        #ss{
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <p>打印背景图</p>
    <input type="button" id="print" value="打印" class="button">
    <div id="ss" class="sample-spreadsheets"></div>
    <script type="text/javascript">
        // Title:打印背景
         // Description：打印背景
         // Tag:打印,背景
        
         function WaterMarkCellType() {
             this.typeName = "WaterMarkCellType"
         }
         WaterMarkCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
         WaterMarkCellType.prototype.paint = function(ctx, value, x, y, w, h, style, options) {
             //Paints a cell on the canvas. 
             var background = style.backgroundImage;
             style.backgroundImage = undefined;
             GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments)
             GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, undefined, x, y, w + 100, h + 100, {
                 backgroundImage: background
             }, options)
         };
        
         $(document).ready(function() {
             var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
             var sheet = spread.getActiveSheet();
             sheet.getCell(3, 3).cellType(new WaterMarkCellType()).backgroundImage('https://www.grapecity.com.cn/images/metalsmith/home/logo_spjs.png')
        
             sheet.setArray(2, 2, [
                 [1, 2, 3, 4, 5, 6, ],
                 [1, 2, 3, 4, 5, 6, ],
                 [1, 2, 3, 4, 5, 6, ],
                 [1, 2, 3, 4, 5, 6, ],
                 [1, 2, 3, 4, 5, 6, ],
                 [1, 2, 3, 4, 5, 6, ]
             ])
        
             $("#print").click(function() {
                 spread.print();
             });
         });
    </script>
</body>

</html>